<template>
  <div v-if="currentElementProps.length" class="pa-5">
    <div class="font-weight-bold mb-3">组件属性</div>
    <component
      :is="'AttrH5' + toCapitalize(item)"
      v-for="item in currentElementProps"
      :key="item"
      v-bind.sync="activeElement.propsValue"
    />
  </div>
</template>

<script>
import attrComponents from './index.js'
import { mapGetters } from 'vuex'

export default {
  components: {
    ...attrComponents
  },
  computed: {
    ...mapGetters([
      'projectData',
      'activePageUUID',
      'activeElementUUID',
      'currentPageIndex',
      'activeElementIndex',
      'activeElement',
      'activePage'
    ]),
    /**
       * 当前选中元素需要编辑得props 列表
			 */
    currentElementProps() {
      if (!this.activeElement.propsValue) {
        return []
      }
      let keyList = Object.keys(this.activeElement.propsValue)
      const editPropsComponentNameList = Object.keys(attrComponents)
      // 过滤掉找不到对应attr props编辑组件的key
      keyList = keyList.filter(v => {
        return editPropsComponentNameList.includes('AttrH5' + this.toCapitalize(v))
      })
      return keyList
    }
  },
  methods: {
    toCapitalize(str) {
      return str.slice(0, 1).toUpperCase() + str.slice(1)
    }
  }
}
</script>
